<template>
    <carousel :autoplay="true" :nav="false" :items="1" >
        <div class="col-lg-12">
            <div class="inner text-center pt--70">
                <div class="react-image" data-aos="fade-up" style="text-align: center;">
                    <img src="../../../assets/images/demo/badge-vue-js.png" alt="Doob Vue" style="display: inline-block;"/>
                </div>
                <h1 class="title display-two" data-aos="fade-up" data-aos-delay="100" style="color: white;">
                    “中国软件杯” 遥感解译赛道<br/>
                    <span class="theme-gradient">深度学习</span> &
                    <span class="theme-gradient">图像处理</span>
                </h1>
                <p class="description" data-aos="fade-up" data-aos-delay="300" style="color: #E4E6EA">
                    目标提取 / 变化检测 / 目标检测 / 地物分类<br/>
                </p>
                <div class="button-group" data-aos="fade-up" data-aos-delay="200">
                    <a class="btn-default btn-large round btn-icon" href="#demo">查看详情
                        <Icon name="arrow-down"/>
                    </a>
                </div>
            </div>
        </div>
		
		<div class="col-lg-12">
		    <div class="inner text-center pt--70">
		        <div class="react-image" data-aos="fade-up" style="text-align: center;">
		            <img src="../../../assets/images/demo/badge-vue-js.png" alt="Doob Vue" style="display: inline-block;"/>
		        </div>
		        <h1 class="title display-two" data-aos="fade-up" data-aos-delay="100" style="color: skyblue;">
					<span class="theme-gradient">目标提取</span> 
				</h1>
		        <p class="description" data-aos="fade-up" data-aos-delay="300" style="color: #E4E6EA">
		            将图像中感兴趣的目标与背景分割开来<br/>识别和解译有意义的物体实体、提取不同的图像特征
		        </p>
		        <div class="button-group" data-aos="fade-up" data-aos-delay="200">
		            <a class="btn-default btn-large round btn-icon" href="objectExtraction">立即体验
		                <Icon name="arrow-right"/>
		            </a>
		        </div>
		    </div>
		</div>
		
		<div class="col-lg-12">
		    <div class="inner text-center pt--70">
		        <div class="react-image" data-aos="fade-up" style="text-align: center;">
		            <img src="../../../assets/images/demo/badge-vue-js.png" alt="Doob Vue" style="display: inline-block;"/>
		        </div>
		        <h1 class="title display-two" data-aos="fade-up" data-aos-delay="100" style="color: skyblue;">
					<span class="theme-gradient">变化检测</span> 
				</h1>
		        <p class="description" data-aos="fade-up" data-aos-delay="300" style="color: #E4E6EA">
		            从同区域不同时期的卫星图像中<br/>定量分析和确定地表变化的特征与过程
		        </p>
		        <div class="button-group" data-aos="fade-up" data-aos-delay="200">
		            <a class="btn-default btn-large round btn-icon" href="changeDetection">立即体验
		                <Icon name="arrow-right"/>
		            </a>
		        </div>
		    </div>
		</div>
		
		<div class="col-lg-12">
		    <div class="inner text-center pt--70">
		        <div class="react-image" data-aos="fade-up" style="text-align: center;">
		            <img src="../../../assets/images/demo/badge-vue-js.png" alt="Doob Vue" style="display: inline-block;"/>
		        </div>
		        <h1 class="title display-two" data-aos="fade-up" data-aos-delay="100" style="color: skyblue;">
					<span class="theme-gradient">目标检测</span> 
				</h1>
		        <p class="description" data-aos="fade-up" data-aos-delay="300" style="color: #E4E6EA">
		            基于目标几何和统计特征<br/>对卫星图像中指定对象完成检测
		        </p>
		        <div class="button-group" data-aos="fade-up" data-aos-delay="200">
		            <a class="btn-default btn-large round btn-icon" href="objectDetection">立即体验
		                <Icon name="arrow-right"/>
		            </a>
		        </div>
		    </div>
		</div>

		<div class="col-lg-12">
		    <div class="inner text-center pt--70">
		        <div class="react-image" data-aos="fade-up" style="text-align: center;">
		            <img src="../../../assets/images/demo/badge-vue-js.png" alt="Doob Vue" style="display: inline-block;"/>
		        </div>
		        <h1 class="title display-two" data-aos="fade-up" data-aos-delay="100" style="color: skyblue;">
					<span class="theme-gradient">地物分类</span> 
				</h1>
		        <p class="description" data-aos="fade-up" data-aos-delay="300" style="color: #E4E6EA">
		            根据不同的光谱信息特征<br/>对卫星图像每个像素完成地物分类
		        </p>
		        <div class="button-group" data-aos="fade-up" data-aos-delay="200">
		            <a class="btn-default btn-large round btn-icon" href="TerrainClassification">立即体验
		                <Icon name="arrow-right"/>
		            </a>
		        </div>
		    </div>
		</div>
    </carousel>
</template>

<script>
    import carousel from 'vue-owl-carousel'
    import Icon from "../../icon/Icon";
    export default {
        name: "MyOwl",
        components:{
            Icon,
            carousel
        },
        data(){
            return{
                
            }
        }
    }
</script>

<style scoped>
    .useBtn{
        margin-top: 40px;
        width: 250px;
        height: 60px;
        font-size: larger;
        background: #008fd5;
    }
    .banner-info h4{
        margin-top: 30px;
        color: white;
    }
.banner-info{
    text-align:center;
    margin-top: 8em;
}
.banner-info img {
    margin: 0 auto;
}
.banner-info h1{
    font-size:50px;
    font-weight:700;
    color:#FFF;
    margin: 1em 0 0 0;
}
.banner-info p{
    font-size:16px;
    color:#FFF;
    margin: 1em 0 0 0;
}
</style>